<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<view class="topTitle">
				<text class="left">活动列表</text>
				<text class="right" @tap="toLog">考试记录</text>
			</view>
			<view class="item-view"  v-for="(item, index) in list" :key="index" @click="toExamList(item.id)">
				<image :src="item.imgUrl" alt="" srcset=""></image>
				<text>{{item.activityName}}</text>
			</view>
			<show-modal></show-modal>
		</view>
		<uni-popup ref="popup" :mask-click="true" type="message" class="popup">
			<view class="popup-body" v-if="examination">
				<view class="popup-view">
					<view class="imgView" v-if="examination.avatarUrl">
						<image :src="examination.avatarUrl"></image>
					</view>
					<view class="textView">
						<view class="title">
							<text>{{examination.examinationName}}</text>
						</view>
						<view class="textBody">
							<text>温馨提示</text>
							<rich-text  :nodes="examination.attention"></rich-text>
						</view>
						
					</view>
					<button size="mini" class="coursebtn" @tap="close">进入考试</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
		import {getActivityList } from '@/api/exam/activity'
		import { getExamOne } from '@/api/exam/exam'
		import loading from '@/components/loading/loading'
	export default {
		data() {
			return {
				list: [],
				type: 0,
				loading:true,
				examination:null
				
			}
		},
		created() {
		  this.getList()
		},
		onLoad(e) {
			this.type = e.type
		},
		methods: {
			getList(){
				getActivityList().then(res => {
					this.list = res.data
					this.loading = false
				}).catch(() =>{
					
				})
			},
			toExamList(activityId){
				uni.setStorageSync('activityId', activityId)
				if(this.type == 1){
					this.$tab.navigateTo('/pages/exam/examList?type=1')
				}else if(this.type == 0){
					getExamOne(activityId).then(res =>{
						if(res.data && res.data.id != null){
							this.examination = res.data
							uni.setStorageSync('examinationId', res.data.id)
							uni.setStorageSync('examination', res.data)
							this.open()
						}else{
							this.$modal.msgError("暂无正式考试")
						}
					})
				}	
			},
			open() {
				this.$refs['popup'].open('center');
			},
			close() {
				this.$refs.popup.close()
				this.$tab.navigateTo('/pages/exam/mock?type=1')	
			
			},
			toLog(){
				this.$tab.navigateTo('/pages/exam/examinationLog?type='+this.type)
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: calc(100vw - 60rpx);
		margin: 0 auto;
		.topTitle{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 10rpx;
			.left{
				font-weight: 600;
			}
			.right{
				
			}
			
		}
	}
	.item-view{
		display: flex;
		overflow: hidden;
		box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
		margin-bottom: 25px;
		border-radius: 5px;
		
		image{
			width: 86px;
			height: 77px;
		}
		text{
			display: block;
			font-family: Inter-Thin, Inter;
			padding-left: 50px;
			line-height: 77px;
			color: #FF9A50;
		}
	}
	.popup-body{
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			.popup-view{
				padding-bottom: 40rpx;
				.imgView{
					overflow: hidden;
					margin: 0 auto;
				}
				.textView{
					line-height: 50rpx;
					padding: 20rpx 40rpx;
					font-size: 24rpx;
					letter-spacing: 1rpx;
					text{
						display:block;
					}
					.title{
						font-size: 14px;
						font-family: Inter-Bold, Inter;
						font-weight: bold;
						text-align: center;
					}
				}
				.coursebtn{
					width: 500rpx;
					height: 100rpx;
					background: #FF9A50;
					border-radius: 20rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #fff;
					margin: 30rpx auto;
					display: block;
				}
			}
		}

</style>